@use './functions.scss' as tools;
/**
 * @description 生成css变量容器
*/
@mixin generate-css-var-root($mode) {
  // 条件为 true 时执行
  @if $mode == 'default' {
    :root {
      @content; // 外部传入的样式在此处展开
    }
    // 条件为 false 时执行
  } @else {
    /**
    * @name 方式1
    * @example <html data-theme="dark">
    * @description vuepress 的主题切换方式
    */
    html[data-theme='#{$mode}'] {
      @content; // 外部传入的样式在此处展开
    }
    /**
    * @name 方式2，当下主流
    * @example <html dark>
    * @description @vueuse 的 useDark()、toggleDark() 方法
    */
    html[#{$mode}] {
      @content;
    }
  }
}
// 生成背景色
/**
* @description 生成背景色
* @param {map} $theme-config - 主题配置
* @param {string} $mode - 主题模式
* @param {string} $namespace - 命名空间
* @return {void} 返回 css var 变量列表
*/
@mixin bg-color-generate-mixin($config, $mode, $namespace) {
  $base-color: tools.map-get($config, 'bg-color');
  $mix-color: tools.map-get($config, 'bg-mix-color');

  --#{$namespace}-bg-color: #{$base-color};

  @for $i from 10 through 0 {
    $temp-color: tools.mix-color($base-color, $mix-color, $i);

    --#{$namespace}-bg-color--light-#{$i}: #{$temp-color};
  }
}
/**
 * @description 生成文本颜色
 * @param {map} $theme-config - 主题配置
 * @param {string} $mode - 主题模式
 * @param {string} $namespace - 命名空间
 * @return {void} 返回 css var 变量列表
 */
@mixin text-color-generate-mixin($config, $mode, $namespace) {
  $base-color: tools.map-get($config, 'text-color');
  $mix-color: tools.map-get($config, 'text-mix-color');

  --#{$namespace}-text-color: #{$base-color};

  @for $i from 10 through 0 {
    $temp-color: tools.mix-color($base-color, $mix-color, $i);

    --#{$namespace}-text-color--light-#{$i}: #{$temp-color};
  }
}

/**
 * @description 生成主题色
 * @param {map} $theme-config - 主题配置
 * @param {string} $mode - 主题模式
 * @param {string} $namespace - 命名空间
 * @return {void} 返回 css var 变量列表
 */
@mixin theme-color-generate-mixin($colors, $config, $mode, $namespace) {
  // 使用背景色作为混色
  $mix-color: tools.map-get($config, 'bg-color');

  @each $key, $value in $colors {
    $color: tools.map-get($colors, $key);
    // --demo-color-primay: #409eff;
    --#{$namespace}-color-#{$key}: #{$value};

    @for $i from 10 through 0 {
      $temp-color: tools.mix-color($value, $mix-color, $i);

      // --demo-color-primay--light-10: #409eff;
      --#{$namespace}-color-#{$key}--light-#{$i}: #{$temp-color};
    }
  }
}
